<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
		<style>
			.a {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			li {
				width: 400px;
				height: 35px;
				border: 2px solid black;
			}

		</style>
	</head>
	<body>

		<!-- 
			js
			基础语法
			DOM
			BOM

		 -->

		<!-- 
			DOM: Document Object Model 文档对象模型, 描述了处理文档的方法, 对文档进行增删改查

			DOM树: 网页加载完成以后, 浏览器会创建一个具有层级关系的树状结构, DOM树中存放了很多节点

			节点类型:
				1. 元素节点 <div>
				2. 文本节点 hehe haha 
				3. 声明节点 <!DOCTYPE html>
				4. 注释节点 <!- - 注释 - -> 注意 --之间没有空格
				5. 根节点 document

			节点之间的关系:
				1. 兄弟(具有相同的父节点)
				2. 父节点
				3. 子节点
				4. 祖先节点
				5. 后代节点
		 -->

		<div id="box"></div>

		<ul>
			<li class="red"></li>
			<li class="red"></li>
			<li class="red"></li>
			<li class="red"></li>
			<li class="red"></li>
		</ul>


		<select name="select" id="">
			<option value="hehe">呵呵</option>
		</select>
		
	</body>
</html>
<script>
	
	// 获取元素的方法
	// 通过id名获取唯一的元素
	var boxDiv = document.getElementById('box');
	// 以目录的形式打印
	console.dir(boxDiv);

	// 通过className(类名)获取元素
	// 返回HTMLCollection(存放元素的集合, 是一个类数组)
	var liArr = document.getElementsByClassName('red');
	console.log(liArr);

	// 通过标签名获取元素
	var redLis = document.getElementsByTagName('li');
	console.log(redLis);
	var firstLi = redLis[2];
	firstLi.style.backgroundColor = "red";

	// 获取ul
	var ul = document.getElementsByTagName('ul')[0];
	console.log(ul);

	// 获取ul下面具有red类名的li
	liArr = ul.getElementsByClassName('red');
	console.log(liArr);

	// 获取ul下面的所有li
	liArr = ul.getElementsByTagName('li');
	console.log(liArr);


	// 通过选择器获取元素
	// 返回NodeList类型, 存放节点的类数组
	var elements = document.querySelectorAll('#box, ul, li.red');
	console.log(elements);

	// 获取满足条件的第一个元素
	var li = document.querySelector('li');
	console.log(li);

	// 通过name属性获取元素, 返回NodeList类型
	var select = document.getElementsByName('select')[0];
	console.log(select.value);


</script>












